<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="仓库">
          <el-select v-model="queryParams.warehouseId" placeholder="仓库" style="width: 140px">
            <el-option
              v-for="item in warehouseList"
              :key="item.id"
              :label="item.name"
              :value="item.id || ''"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="createTime" label="操作日期">
          <el-date-picker
            v-model="queryParams.queryTime"
            :editable="false"
            type="daterange"
            range-separator="~"
            start-placeholder="开始时间"
            end-placeholder="截止时间"
            value-format="YYYY-MM-DD"
            style="width: 300px"
          />
        </el-form-item>
        <el-form-item class="search-buttons">
          <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-row :gutter="10">
      <!-- 访问趋势统计图 -->
      <el-col :xs="24" :span="12">
        <el-card>
          <template #header>
            <div class="flex-x-between">
              <span>入库统计</span>
            </div>
          </template>
          <ECharts :options="inventoryIn" height="400px" />
        </el-card>
      </el-col>
      <el-col :xs="24" :span="12">
        <el-card>
          <template #header>
            <div class="flex-x-between">
              <span>出库统计</span>
            </div>
          </template>
          <ECharts :options="inventoryOut" height="400px" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import WarehouseAPI, { WarehousePageVO } from "@/api/business/warehouse/warehouse.api";
import InventoryStatAPI, {
  InventoryStatQuery,
  BaseChart,
  ChartOptions,
} from "@/api/business/warehouse/inventoryStat.api";
import { dayjs } from "element-plus";

defineOptions({
  name: "InventoryStat",
  inheritAttrs: false,
});

const queryFormRef = ref();
const inventoryIn = ref();
const inventoryOut = ref();

const warehouseList = reactive<WarehousePageVO[]>([]);

const queryParams = reactive<InventoryStatQuery>({
  queryTime: [dayjs().format("YYYY-MM-01"), dayjs().format("YYYY-MM-DD")],
});

const setChart = (data: BaseChart, inOrOut: boolean) => {
  let options: ChartOptions = {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: [],
      bottom: 0,
    },
    grid: {
      left: "1%",
      right: "5%",
      bottom: "10%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: data.axis,
    },
    yAxis: {
      type: "value",
    },
    series: [],
  };
  let outTitle = [];
  for (let i = 0; i < data.series.length; i++) {
    let item = {
      name: data.series[i].name,
      type: data.type,
      data: data.series[i].data,
      smooth: true,
    };
    outTitle.push(item.name);
    options.series.push(item);
  }

  if (inOrOut) {
    options.legend.data = ["入库"];
    inventoryIn.value = options;
  } else {
    options.legend.data = outTitle;
    inventoryOut.value = options;
  }
};

/** 查询（重置页码后获取数据） */
function handleQuery() {
  fetchData();
}

/** 重置查询 */
function handleResetQuery() {
  queryFormRef.value.resetFields();
  queryParams.queryTime = undefined;
  queryParams.startDay = undefined;
  queryParams.endDay = undefined;
  fetchData();
}

// 获取数据
function fetchData() {
  InventoryStatAPI.statInChart(queryParams)
    .then((data) => {
      setChart(data, true);
    })
    .finally(() => {});
  InventoryStatAPI.statOutChart(queryParams)
    .then((data) => {
      setChart(data, false);
    })
    .finally(() => {});
}

const loadWarehouses = () => {
  WarehouseAPI.loadAll().then((data) => {
    if (data.length > 0) {
      warehouseList.push(...data);
      queryParams.warehouseId = data[0].id;
    }
  });
};

onMounted(() => {
  loadWarehouses();
  handleQuery();
});
</script>
